<template>
  <div class="jingkaimian">
    <el-tooltip :open-delay="1000" placement="top">
      <div slot="content">
        <span class="content_title">设备编号：</span>
        {{ id }} 组
        <br />
        <span class="content_title">设备状态：</span>
        {{ stateCode }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ xiaolv }}%
        <br />
        <span class="content_title">生产品种：</span>
        {{ data.pz }}
        <br />
        <span class="content_title">更新时间：{{ time }}</span>
      </div>
      <div class="kaimian-content">
        <svg
          width="15px"
          height="15px"
          viewBox="0 0 15 15"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="首页" transform="translate(-1826.000000, -234.000000)">
              <g id="1左" transform="translate(1826.500000, 234.000000)">
                <rect
                  id="矩形备份-145"
                  stroke="#7BCFFF"
                  :style="bodyStyle"
                  transform="translate(5.000000, 7.500000) rotate(-90.000000) translate(-5.000000, -7.500000) "
                  x="-2"
                  y="2.5"
                  width="14"
                  height="10"
                ></rect>
                <polygon
                  id="矩形备份-146"
                  stroke="#7BCFFF"
                  stroke-width="0.5"
                  :style="headStyle"
                  transform="translate(12.250000, 7.500000) rotate(-90.000000) translate(-12.250000, -7.500000) "
                  points="8.25 5.75 16.25 5.75 15.25 9.25 9.25 9.25"
                ></polygon>
                <text
                  id="1备份-2"
                  font-family="PingFang-SC-Medium, PingFang SC"
                  font-size="8"
                  font-weight="400"
                  letter-spacing="-0.5"
                  fill="#FFFFFF"
                >
                  <tspan x="3.5" y="10">{{ id }}</tspan>
                </text>
              </g>
            </g>
          </g>
        </svg>
        <div v-if="inline" class="kaimian-xiaolv">
          {{ xiaolv + "%" }}
        </div>
        <!-- <svg
        id="精开棉"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="42"
        height="20"
        viewBox="0 0 212 94"
      >
        <defs>
          <linearGradient
            id="linear-gradient"
            x1="91"
            y1="93"
            x2="91"
            y2="1"
            gradientUnits="userSpaceOnUse"
          >
            <stop offset="0" stop-color="#276ca7" />
            <stop offset="0.505" stop-color="#3f8fd2" />
            <stop offset="1" stop-color="#276ca7" />
          </linearGradient>
        </defs>
        <path
          :style="bodyStyle"
          id="圆角矩形_2"
          data-name="圆角矩形 2"
          class="cls-1"
          d="M5,1H181a0,0,0,0,1,0,0V93a0,0,0,0,1,0,0H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1Z"
        />
        <path
          id="圆角矩形_2_拷贝"
          :style="headStyle"
          data-name="圆角矩形 2 拷贝"
          class="cls-2"
          d="M181,1h26a4,4,0,0,1,4,4V89a4,4,0,0,1-4,4H181a0,0,0,0,1,0,0V1A0,0,0,0,1,181,1Z"
        />
        <path
          id="形状_1"
          data-name="形状 1"
          class="cls-3"
          d="M1794,411h-26v-1h26v1Zm-42,16.707V428H1633V392h119v0.286l0.5-.29,15.49,9v18l-15.49,9Z"
          transform="translate(-1615 -363)"
        />
        <text
          id="_1"
          data-name="1"
          class="cls-4"
          transform="translate(75.93 68.324) scale(2.139)"
        >
          {{ id }}
        </text>
      </svg> -->
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mul } from "@/utils/caculate";
export default {
  name: "duocang",
  props: {
    data: Object,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ""
      },
      bodyStyle: {
        fill: ""
      },
      stateCode: "",
      id: "",
      time: "",
      xiaolv: 0
    };
  },
  computed: {
    newData() {
      return this.data;
    }
  },
  watch: {
    data(val) {
      this.id = this.data.devSn;
      this.stateCode = this.getHeadName(this.data.stateCode);
      this.xiaolv = mul(this.data.xiaolv, 100);
      this.time = this.data.time;
      this.headStyle.fill = this.getHeadColor(this.data.stateCode);
      this.bodyStyle.fill = this.getBodyColor(this.data.xiaolv);
    }
  },

  mounted() {},
  methods: {
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "url(#jhttcs)";
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯失败";
        // 计划停台
        case 6:
          return "计划停台";
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100;
      if (stateCode >= 90) {
        return "#006BCE";
      } else if (90 > stateCode && stateCode >= 80) {
        return "#8D6F00";
      } else if (80 > stateCode && stateCode > 70) {
        return "#7F6D6A";
      } else if (stateCode <= 70) {
        return "#8214C3";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cls-1,
.cls-2,
.cls-3 {
  stroke: #82c4fa;
  stroke-width: 2px;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-2 {
  fill: #448841;
}

.cls-3 {
  fill: none;
  stroke-linejoin: round;
  fill-rule: evenodd;
}

.cls-4 {
  font-size: 28.172px;
  fill: #fff;
  font-family: "Microsoft YaHei";
  font-weight: 700;
}
.kaimian-content {
  position: relative;
}
.kaimian-xiaolv {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  transform: scale(0.6);
  position: absolute;
  white-space: nowrap;
  left: -34px;
  top: -1px;
  width: 32px;
  text-align: left;
}
</style>
